"use client"
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { NewRegion } from '../../../types/region';

export default function RegionCreate() {
    const router = useRouter();
    const [name, setName] = useState<string>('');
    const [regionType, setRegionType] = useState<number>(0);
    const [latitude, setLatitude] = useState<number>(0);
    const [longitude, setLongitude] = useState<number>(0);
    const [parentRegionId, setParentRegionId] = useState<string | undefined>(undefined);

    const addRegion = async (e: any) => {
        e.preventDefault();
        if (name !== '') {
            const formData: NewRegion = {
                Name: name,
                RegionType: regionType,
                Latitude: latitude,
                Longitude: longitude,
                ParentRegionId: parentRegionId,
            };
            const add = await fetch('/api/region', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });
            const content = await add.json();
            if (content.success > 0) {
                router.push('/region');
            }
        }
    };

    return (
        <form className="w-full" onSubmit={addRegion}>
            <span className="font-bold text-yellow-500 py-2 block underline text-2xl">Form Add</span>
            <div className="w-full py-2">
                <label htmlFor="" className="text-sm font-bold py-2 block">Name</label>
                <input type="text" name="name" className="w-full border-[1px] border-gray-200 p-2 rounded-sm" onChange={(e: any) => setName(e.target.value)} />
            </div>
            <div className="w-full py-2">
                <label htmlFor="" className="text-sm font-bold py-2 block">Region Type</label>
                <input type="number" name="regionType" className="w-full border-[1px] border-gray-200 p-2 rounded-sm" onChange={(e: any) => setRegionType(parseInt(e.target.value))} />
            </div>
            <div className="w-full py-2">
                <label htmlFor="" className="text-sm font-bold py-2 block">Latitude</label>
                <input type="number" name="latitude" className="w-full border-[1px] border-gray-200 p-2 rounded-sm" onChange={(e: any) => setLatitude(parseFloat(e.target.value))} />
            </div>
            <div className="w-full py-2">
                <label htmlFor="" className="text-sm font-bold py-2 block">Longitude</label>
                <input type="number" name="longitude" className="w-full border-[1px] border-gray-200 p-2 rounded-sm" onChange={(e: any) => setLongitude(parseFloat(e.target.value))} />
            </div>
            <div className="w-full py-2">
                <label htmlFor="" className="text-sm font-bold py-2 block">Parent Region ID</label>
                <input type="text" name="parentRegionId" className="w-full border-[1px] border-gray-200 p-2 rounded-sm" onChange={(e: any) => setParentRegionId(e.target.value)} />
            </div>
            <div className="w-full py-2">
                <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
            </div>
        </form>
    );
}